<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>fadeout-Test</title>
    <style>
        body {
            margin: 0px;
            background-color: aquamarine;
        }

        .fadeout {
            position: relative;
            margin: 50px auto;
            width: 200px;
            height: 200px;
            background-color: rgb(54, 54, 54);
        }

        .btn_fadeout {
            position: relative;
            top: 50%;
            left: 50%;
            width: 120px;
            height: 50px;
        }
    </style>
</head>

<body>
    <div class="fadeout"></div>
    <button class="btn_fadeout">点击toright淡出</button>
    <button class="btn_fadeout">点击todown淡出</button>
    <br>
    <button class="btn_fadeout">点击toup淡出</button>
    <button class="btn_fadeout">点击toleft淡出</button>
    <button class="btn_fadeout">恢复</button>



    <script type="text/javascript" src="../src/tatu.js"></script>
    <script>
        const fadeoutbox = document.querySelector('.fadeout');
        const btnfadeouts = document.querySelectorAll('.btn_fadeout');
        let flag = false;

        /*  fadeout(): 淡出动画---参数说明:
            参数一: htmlElement: 需要操作的html元素
            参数二: direction: 动画方向，值为"toup" / "todown" / "toleft" / "toright"，类型string
            参数三: callback: 可选，动画完成后的回调函数
        */

        btnfadeouts[0].addEventListener('click', () => {
            fadeout(fadeoutbox, 'toright', (f) => {
                console.log('ok');
                flag = f;
            });
        });
        btnfadeouts[1].addEventListener('click', () => {
            fadeout(fadeoutbox, 'todown', (f) => {
                console.log('ok');
                flag = f;
            });
        });
        btnfadeouts[2].addEventListener('click', () => {
            fadeout(fadeoutbox, 'toup', (f) => {
                console.log('ok');
                flag = f;
            });
        });
        btnfadeouts[3].addEventListener('click', () => {
            fadeout(fadeoutbox, 'toleft', (f) => {
                console.log('ok');
                flag = f;
            });
        });
        btnfadeouts[4].addEventListener('click', () => {
            if (flag) {
                fadeoutbox.style = '';
            };
        });
    </script>
</body>

</html>